<!-- 新建楼栋-基本信息 -->
<template>
	<view class="formwork-container">
		<u-steps :list="numList" :current="1" mode="number"></u-steps>
		<u-gap height="12" bgColor="#F7F7F7"></u-gap>
		<view class="cell">
			<view class="title">楼层模板设置</view>
			<view class="cell-item" v-for="(item, index) in basicTemplate" :key="index">
				<view class="item-title">
					{{item.unit}}
				</view>
				<view class="con">
					<view @click="opencell(item, i)" v-for="(val, i) in item.floorTemplate" :key="i">
						<text>{{val.floorNumber}}</text>
						<text>{{val.floorHouse}}</text>
						<text>{{val.houseArea}}{{val.houseArea ? "m²" : ""}}</text>
					</view>
				</view>
			</view>
		</view>
		<u-gap height="6" bgColor="#F7F7F7"></u-gap>
		<view class="tips">
			<text>说明：</text>
			<text>1、楼层模板用于生成整个楼栋的所有房间</text>
			<text>2、点击房间可编辑单元、户型、面积</text>
		</view>
		<view class="btns">
			<button @click="create()">生成</button>
		</view>
		<!-- 编辑楼层模版 -->
		<u-popup v-model="showFormWork" mode="bottom" :closeable="true" @close="close">
			<view class="popupTitle">
				{{numCell}}
			</view>
			<view class="popupCon">
				<view class="item">
					<text style="font-size: 28rpx;">单元：</text>
					<text style="font-size: 28rpx;">{{obj.unit}}</text>
				</view>
				<u-form :model="form">
					<view class="item">
						<text style="font-size: 28rpx;">户型：</text>
						<u-select v-model="showHouse" mode="mutil-column" :list="columnsHouse" @confirm="changeHouse">
						</u-select>
						<text v-if="form.house">{{form.house}}</text>
						<text v-else style="color: rgb(192, 196, 204);font-size: 28rpx;"
							@click="showPicker()">请选择&nbsp;></text>
					</view>
					<view class="item">
						<text style="font-size: 28rpx;">面积：</text>
						<u-input type="digit" v-model="form.area" :border="false" inputAlign="right"
							placeholder="请输入面积"></u-input>
						<text style="margin-left: 10rpx;font-size: 28rpx;">m²</text>
					</view>
				</u-form>
				<button class="submit" @click="submit(numCell)">确定</button>
			</view>
		</u-popup>
	</view>
</template>

<script>
	import {
		addFloor
	} from '@/unit/api.js';
	export default {
		data() {
			return {
				numList: [{
					name: '基本信息'
				}, {
					name: '楼层模板'
				}, {
					name: '房间设置'
				}],
				showFormWork: false, // 编辑楼层模版弹出层
				showHouse: false,
				basicTemplate: {}, // 上一个页面返回的楼层模板
				columnsHouse: [
					[	
						{
							value: '1',
							label: '1室'
						},
						{
							value: '2',
							label: '2室'
						},
						{
							value: '3',
							label: '3室'
						},
						{
							value: '4',
							label: '4室'
						},
						{
							value: '5',
							label: '5室'
						}
					],
					[
						{
							value: '1',
							label: '1厅'
						},
						{
							value: '2',
							label: '2厅'
						},
						{
							value: '3',
							label: '3厅'
						},
						{
							value: '4',
							label: '4厅'
						},
						{
							value: '5',
							label: '5厅'
						}
					],
					[
						{
							value: '1',
							label: '1卫'
						},
						{
							value: '2',
							label: '2卫'
						},
						{
							value: '3',
							label: '3卫'
						},
						{
							value: '4',
							label: '4卫'
						},
						{
							value: '5',
							label: '5卫'
						}
					],
					[
						{
							value: '1',
							label: '1厨'
						},
						{
							value: '2',
							label: '2厨'
						},
						{
							value: '3',
							label: '3厨'
						},
						{
							value: '4',
							label: '4厨'
						},
						{
							value: '5',
							label: '5厨'
						}
					],
					[
						{
							value: '1',
							label: '1阳台'
						},
						{
							value: '2',
							label: '2阳台'
						},
						{
							value: '3',
							label: '3阳台'
						},
						{
							value: '4',
							label: '4阳台'
						},
						{
							value: '5',
							label: '5阳台'
						}
					],
				],
				form: {
					house: '', // 户型
					area: '' // 面积
				},
				obj: {}, // 房间信息
				i: '', // 房间索引
				numCell: '', // 单元
			}
		},
		onLoad() {
			this.basicTemplate = uni.getStorageSync("basicTemplate");
		},
		methods: {
			// 打开弹出层
			opencell(item, i) {
				this.form.house = "";
				this.form.area = "";
				this.showFormWork = true;
				this.obj = item;
				this.i = i;
				this.numCell = item.floorTemplate[i].floorNumber;
			},
			// 关闭弹框
			close() {
				this.showFormWork = false;
			},
			// 打开户型弹出层
			showPicker() {
				this.showHouse = true;
			},
			// 户型弹框选择
			changeHouse(e) {
				let newArr = [];
				e.map(item => {
					newArr.push(item.label)
				});
				this.form.house = newArr.join("");
			},
			// 面积户型修改
			submit(args) {
				this.basicTemplate.map((item, index) => {
					item.floorTemplate.map((val, i) => {
						if (val.floorNumber == args) {
							val.floorHouse = this.form.house;
							val.houseArea = this.form.area;
						}
					})
				});
				uni.setStorageSync("basicTemplate", this.basicTemplate);
				this.showFormWork = false;
			},
			create() {
				const param = {
					buildingOver: 0,
					communityId: uni.getStorageSync("communityId"),
					floorName: uni.getStorageSync("basicForm").floorName,
					floorNums: uni.getStorageSync("basicForm").floorNums,
					floorType: uni.getStorageSync("basicForm").floorType,
					floorUnitNums: uni.getStorageSync("basicForm").floorUnitNums,
					floorRule: 1,
					floorTemplateEntityList: this.basicTemplate
				};
				console.log("param", param)
				addFloor(param).then(data => {
					console.log("data", data)
					if (data.data.code == 1) {
						uni.navigateTo({
							url: `../set/set?id=${data.data.object}`
						})
					} else {
						uni.showToast({
							title: data.msg,
							icon: "none",
							duration: 2000
						})
					}
				});
			}
		}
	}
</script>

<style lang="scss">
	.btns {
		// position: fixed;
		// bottom: 50rpx;
		width: 90%;
		margin: auto;
		text-align: center;
		// left: 0;
		// right: 0;
		margin-top: 80rpx;
		margin-bottom: 50rpx;

		button {
			line-height: 90rpx;
			background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
			height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			border-radius: 8rpx;
			margin: auto;
			width: 100%;
		}
	}

	.cell {
		width: 90%;
		margin: auto;

		.title {
			margin-top: 40rpx;
			margin-bottom: 45rpx;
			color: #333;
			font-size: 30rpx;
			font-weight: bold;
		}

		.con {
			display: flex;
			// justify-content: center;
			margin-top: 20rpx;
			margin-bottom: 40rpx;
			overflow: auto;

			view {
				border: 1px solid #DDDDDD;
				height: 140rpx;
				width: 160rpx;
				margin-left: 10rpx;
				margin-right: 10rpx;
				text-align: center;
				font-size: 24rpx;
				display: flex;
				flex-wrap: wrap;
				justify-content: center;
				align-items: center;
				flex-shrink: 0;

				text {
					display: block;
					width: 100%;
				}
			}
		}

		.item-title {
			width: 100%;
			background: #EFFAFF;
			height: 60rpx;
			line-height: 60rpx;
			text-align: center;
		}
	}

	.tips {
		width: 90%;
		margin: auto;
		margin-top: 40rpx;

		text {
			color: #666666;
			font-size: 26rpx;
			display: block;
			width: 100%;

			&:first-child {
				margin-bottom: 10rpx;
			}
		}
	}

	.popupTitle {
		text-align: center;
		font-size: 32rpx;
		color: #333333;
		height: 100rpx;
		line-height: 100rpx;
		border-bottom: 1px solid #E4E4E4;
		width: 100%;
	}

	.popupCon {
		width: 95%;
		margin: auto;

		.item {
			margin: auto;
			height: 80rpx;
			line-height: 80rpx;
			margin-top: 20rpx;
			display: flex;
			justify-content: space-between;
			width: 95%;
			border-bottom: 1px solid #F9F9F9;
			align-items: center;
			font-size: 32rpx;

			/deep/.u-input__content__field-wrapper__field {
				text-align: right !important;
				margin-right: 20rpx;
				font-size: 32rpx !important;
			}
		}

		.submit {
			background-image: linear-gradient(to right, #21A9FF, #199AEC) !important;
			height: 90rpx;
			color: #fff;
			font-size: 32rpx;
			margin-bottom: 50rpx;
			margin-top: 40rpx;
			line-height: 90rpx;
		}
	}

	/deep/.u-gap {
		margin-top: 40rpx !important;
		margin-bottom: 10rpx !important;
	}
</style>
